<template>
  <div class="home-page">
    <div class="expired" v-if="!haveToken">
      <span>登录已失效,请重新登录</span>
      <router-link class="link" to="/">登录?</router-link>
    </div>
    <img src="http://localhost:9000/static/test.jpg" alt="" />
    <div v-if="haveToken" class="home-content">
      <Header />
      <div class="content">
        <div class="content-left">
          <ul>
            <li
              v-for="(item, i) in navigationBar"
              :key="i"
              @click="navListClick(i, item)"
              :class="{ active: isActive(currentRoute, item) }"
            >
              <span class="iconfont" :class="item.icon"></span>
              <span class="name">{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="content-right">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import obtainToken from "@/util/obtainToken";
import md5 from "md5";
import Header from "./header";
import { navigationBar } from "./config";
import _ from "loadsh";
export default {
  components: {
    Header,
  },
  data() {
    return {
      navigationBar,
      active: null,
      currentRoute: null, //当前路由
    };
  },
  methods: {
    navListClick(i, item) {
      if (this.$route.path == item.path) return;
      this.currentRoute = item.path;
      this.$router.push(item.path);
    },
    isActive(currentRoute, item) {
      return _.includes(currentRoute, item.path);
    },
  },
  computed: {
    haveToken() {
      //判断是否登录了
      let cookieToken = md5(md5(obtainToken(document.cookie)));
      let localStorageToken = localStorage.getItem("token");
      return cookieToken === localStorageToken;
    },
  },
  mounted() {
    this.currentRoute = this.$route.path;
  },
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>
